<template>
  <div id="bar" style="width: 600px; height: 1000px;">
	<div id="kuang" title = 'tooltip' style = "position:absolute;
    width: 120px;
    height: 60px;
    font-family: simsun;
    font-size: 14px;
    text-align: center;
    border-style: solid; 
    border-width: 2px;
    border-color: #4575b4;
	backgroud-transparent:100;
    border-radius: 5px;"></div>
</div>
</template>
<script>
import * as d3 from "d3";
export default {
    data(){
        return {
            data : [] 
        }
    },
    mounted(){
     this.setsvg()
    },
    methods:{
     setsvg(){
	

    var data =[['完成单数',18442,65.84],['部分完成单数',4784,17.07],['未完成单数',4784,17.07]];
	
    var width =440,
	height = 440,
	radius = width/2;

var color = d3.scaleOrdinal()
	.range(["#e0f3f8","#abd9e9","#4575b4"]);

var arc = d3.arc()
	.outerRadius( radius - 10)
	.innerRadius(20)
	.cornerRadius(20);

var labelArc = d3.arc()
	.outerRadius(150)
	.innerRadius(150);
	//饼图生成器

var pie = d3.pie()
	.sort(null)
	.value(function(d){ 
	//console.log(d[1]);
	return d[1]; });
	//圆形生成器
    var svg = d3.select("#bar")
	.append("svg")
	.attr("width",width)
	.attr("height",height)
	.append("g")
	.attr("transform","translate("+ width/2 +"," + 210 +")");//移动元素
     //画布

    var g = svg.selectAll(".arc")
		.data(pie(data))
		//console.log(pie(data))
		.enter()
		.append("g")
		.attr("class","arc");
        g.append("path")
		.attr("d",arc)
		.attr("fill",function(d) {
			return color(d.data[0]);
		})
		.transition()
		.ease(d3.easeLinear)
		.duration(1500)
		.attrTween("d",pieTween);
    
       g.append("text")
        .transition()
		.duration(1500)
		.attr("transform", function(d) { return "translate(" + labelArc.centroid(d) + ")"; })
		.attr("dy",".45em")
		.text(function(d){ 
		//console.log(d);
		return d.data[0];})
		
		var tooltip = d3.select("#kuang")
            .append("div")
            .attr("class","tooltip")
			.style("opacity",1.0); 
           
     

		g.select("path")
        .on('mouseover', function(){ // 鼠标悬停事件效果(由于箭头函数里面没有this，所以这里我们只能用function(){})
               d3.select(this)
                .transition() // 添加动画效果
                .duration(300)
				.attr('fill',function(d)
		{
        tooltip.html(d.data[0] + "为" + "<br />" + 
  d.data[1] + "单"+"<br />"+"占比约为"+d.data[2]+"%")
		.style("opacity",1.0); 
		return '#3bb265';
		})
		})
		
		
			
            
        .on('mouseout', function() {
            g.selectAll('g path')
                .transition()
                .duration(300)
				.attr("fill",function(d){
		//console.log(d.data[0]);
		return color(d.data[0]);})
		tooltip.style("opacity",0.0);

		});
        
        function pieTween(b){
		b.innerRadius = 0;
		var i = d3.interpolate({startAngle:0,endAngle:0},b);
		return function(t) {return arc(i(t));};
	}//动画
  }
 }
}
</script>
